<link rel="stylesheet" type="text/css" media="screen" href="css/menu/docklayout.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/menu/qqwebmain.css">
<style>

  /*
  #facilityhouseStylePanelanel {
  top: 152px;
  left: 80%;
  width: 200px;
  position: absolute;
  background:url(<?php echo Yii::app()->baseUrl."/images/webgl/head/StripePattern.png"?>) repeat;
  }*/
  .rTypePosition {
  top: 82px;
  color: #000000;
  /*background-color: #999999;*/
  position: absolute;
  }
  .roomtype {
  MARGIN-RIGHT: auto;
  MARGIN-LEFT: auto;
  }
  .roomStyle {
/*   border-top: solid ; 
   border-bottom: solid ; */

  border-width: 2px;
  margin-top: 1px;
  margin-bottom: 1px;
  text-align: center;
  /*border-color: #F1F1F1;*/
  }
  
  
  .selected{
  border-color: red
  }
</style>
<script type="text/javascript">
  $(function() {
    $(".dockitem").fancybox({scrolling:'yes'});
    
    
        $('#houseStylePanel').load(popmenuUrl, {
        'hostInfo' : JSON.stringify({"name":"houseInfo"})
        }, function(data) {
            //console.warn(data);
        });
        

    
    $("#save").click(function(){
      alert('save');
      build.saveHouse();
    });
    
    $("#saveStyle").click(function(){
      build.saveStyle();
    });
    
    /*
     $('canvas').off('mousemove').off('mousedown').off('mouseup')
      .bind('mousemove', function(event) {
         // build.moveArea(event);
          build.operStrucutre(event);
      })
      */
    var walls;

    $('.delroom').bind('click', function() {
      $(".selected").remove();
      var num;
      for(var i = 0; i < build.structs.length; i++) {
        if($('.selected').attr('wid') == build.structs[i].id) {
          num = i;
          break;
        }
      }
      build.structs.splice(num, 1);
    });
    $('.exproom').bind('click', function() {
      // alert($(".selected").attr('wid'));
      var sut;
      for(var i = 0; i < build.structs.length; i++) {
        if($('.selected').attr('wid') == build.structs[i].id) {
          sut = build.structs[i];
          break;
        }
      }
    });
    var thumbnum=1;
    $('.okroom').bind('click',function(){
      // var walls = build.calcWalls(build.structure);
      var wid=build.structure.rndId;
      var roomId = "c" + build.structure.rndId;
      var roomStyleId = "s" + build.structure.rndId;
      var rsd = "#" + roomStyleId;
      // var strSize=walls.size.x+'*'+walls.size.z;
      var addStr = "<div class=roomStyle id=" + roomStyleId + " wid=" + wid + ">" + 
              "<div class=roomStruct style=width:100%;height:100px>" + 
                "<canvas id=" + roomId + " style='width:100%; height:100%'></canvas>" + 
              "</div>" + 
              "<div class='roomType'> 序号:" + thumbnum + "类型:" + RoomUtil.getRoomTypeName(build.structure.roomType) + "</div>" + 
            "</div>";
      var cid = "#" + roomId;
      thumbnum+1;
      $('#roomStyleList').append(addStr);

      if($(".roomStyle").size() > 2) {
        $("#roomStyleList").css({
          marginTop : "-122px"
        });
      } else {
        $("#roomStyleList").css({
          marginTop : "0px"
        });
      }
      var c = document.getElementById(roomId, image);
      
      build.convertRoomTo2D(c, image, build.roomFloors);

      $('#dockItemList #drawRoom').click(function(){drawRoom(this)});
      
      // build.changeRoomThumb(ctxRoom3, image, walls);
      
    });
    
    $("#takePhoto").click(function(){
      //alert('dd');
      $("canvas").attr('id','test');
      var canvas = document.getElementById('test'); 
      var url = canvas.toDataURL();
      var photo="<img id='photo'></img>";
      $(photo).attr('src',url);
      $("#houseInfoShow").append($(photo));
      console.warn(url);
    });
    
    
    $('#setting').click(function(){
      //$.include("xxx.js");
      
      $.get(fitmentPanelUrl,function(data){
          $("#leftBar").html(data);
        }); 

      build.initStructureObject3D();
      build.changeFlat();
      build.loadStructure();
      
      for (var i=0; i < build.structures.length; i++) {
        var walls = build.calcWalls3D(build.structures[i]);
        build.facade(walls);
      };

      $('#facilityPanel').empty();
      $('.stage canvas').unbind();
      $('.stage canvas').bind('click', function(event) {
//        build.getStructure(event);
        build.getFacility(event);
      });
      scene.remove(build.rollOverMesh);
      build.releaseCache();
      
    });

    $('.cleroom').bind('click', function() {
      $("#roomStyleList").empty();
    });
    $('#dockItemList #drawRoom').click(function() {

      drawRoom(this);
    });
    var roomNum=0;
    function drawRoom(roomItem){
      roomNum+=1;
      var roomType = $(roomItem).attr('type');
      build.initStructureObject3D(roomType,roomNum);
      $('canvas').off('mousemove').off('mousedown').off('mouseup')
      .bind('mousemove', function(event) {
         // build.moveArea(event);
          build.operStrucutre(event);
      }).bind('mousedown', function(event) {
            //build.startArea(event);
           build.getStructure(event);
      }).bind('mouseup', function(event) {
         build.endArea(event);
      });
      
      $('canvas').bind('dblclick', function(event) {build.getArea(event)
      });
      // $("#dockItemList #drawRoom").unbind();
      return false;
    };
    $('#facadeHouse').click(function() {
      $('canvas').unbind('mousemove');
      $('canvas').unbind('mousedown');
      $('canvas').unbind('mouseup');
      $('canvas').bind('click', function(event) {
        build.getFacility(event);
      });
      walls = build.calcWalls(scene.getChildByName('group'));
      // scene = new THREE.Scene;
      // build.setScene(scene);
      // camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 100000);
      // // camera = new THREE.CombinedCamera( window.innerWidth, window.innerHeight, 45, 1, 10000, -2000, 10000 );
      // camera.orgPosition = new THREE.Vector3(0, 100, 500);
      camera.position.y = 600;
      camera.position.z = 600;
      camera.lookAt(new THREE.Vector3(0, 0, 0));
      // camera.position.z = 1300;
      // build.setCamera(camera);

      gone2Facade = true;
      controls = new FirstPersonControls(camera);
      controls.lookSpeed = 0.0125;
      controls.movementSpeed = 500;
      controls.noFly = false;
      controls.lookVertical = true;
      controls.constrainVertical = false;
      controls.freeze = false;

      build.clearStructure();
      build.facade(walls);

      return false;
    });

    // $('#mergerHouse').click(function() {
      // // for(var i in build.structures) {
        // // s3d = build.structures[i];
        // // // if(s3d.name == 'structure3D') {
          // // var walls = build.calcWalls3D(s3d);
          // // build.facade(walls);
          // // $('.facilityPanel').empty();
          // // $('.stage canvas').unbind();
          // // $('.stage canvas').bind('click', function(event) {build.getFacility(event)
          // // })
        // // // }
      // // }
          // var walls = build.calcWalls3D();
          // build.facade(walls);
          // $('.facilityPanel').empty();
          // $('.stage canvas').unbind();
          // $('.stage canvas').bind('click', function(event) {build.getFacility(event)
          // })
//          
    // });
    
  $('#clearHouse').click(function(){
    build.clearStructure();   
  });
    
    $('.panel').mouseenter(function(){
    // $('canvas').unbind('click');
    }).mouseleave(function() {
      $('canvas').bind('click', function(event) {
        // getFacility(event)
      });
    });
    
    
    /*
    $('.panel').draggable({
      cursor : 'crosshair',
      handle : ".draghandle",
      containment : '.stage',
      scroll : false
    });
    */
    $(".testitem").fancybox();
    
    
    $("#clear").click(function(){
    
      build.initStage();
      return false;
    });
  });

</script>
<div id="leftBar"  >

<?php if(isset($houseStyle)){?>
<?php include dirname(__FILE__) . '/fitmentPanel.php';?>
<?php } else{?>
<?php include dirname(__FILE__) . '/buildPanel.php';}?>

</div>

  <script>
$(function(){
    $('#leftBar').click(function() {
      $("#dockItemList").animate({
        height : 1000
      }, "slow");
    });
  });
</script>